<template>
  <div class="bottom">
    <van-tabbar v-model="active" class="m-tab">
      <van-tabbar-item icon="wap-home-o" to="/home">
        <span class="txt">首页</span>
      </van-tabbar-item>
      <van-tabbar-item icon="coupon-o" to="/category">
        <span>分类</span>
      </van-tabbar-item>
      <van-tabbar-item icon="idcard" to="/valuebuy">
        <span>值得买</span>
      </van-tabbar-item>
      <van-tabbar-item icon="cart-o" to="/cart">
        <span>购物车</span>
      </van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/personal">
        <span>个人</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
const active = ref(0);
const route = useRoute()
onMounted(() => {
  active.value = route.meta.index as number
})
</script>

<style scoped>
.bottom {
  height: 50px;
  z-index: 55;
}

.m-tab {
  background-color: #fafafa;
}
</style>